<template>
	<view class="ice-tabbar">
		<view style="height:120rpx"></view>
		<u-tabbar :fixed="true" :value="curTab" @change="tabChange" :placeholder="false" :safeAreaInsetBottom="false" :border="false">
			<u-tabbar-item :text="$t('menu_1')">
				<image class="u-page__item__slot-icon tabbar-icon" slot="inactive-icon"
					src="../../static/menu/1.png"></image>
				<image class="u-page__item__slot-icon tabbar-icon" slot="active-icon"
					src="../../static/menu/1_a.png"></image>
			</u-tabbar-item>
			<u-tabbar-item :text="$t('menu_2')">
				<image class="u-page__item__slot-icon tabbar-icon" slot="inactive-icon"
					src="../../static/menu/2.png"></image>
				<image class="u-page__item__slot-icon tabbar-icon" slot="active-icon"
					src="../../static/menu/2_a.png"></image>
			</u-tabbar-item>
			<u-tabbar-item :text="$t('menu_3')">
				<image class="u-page__item__slot-icon tabbar-icon" slot="inactive-icon"
					src="../../static/menu/3.png"></image>
				<image class="u-page__item__slot-icon tabbar-icon" slot="active-icon"
					src="../../static/menu/3_a.png"></image>
			</u-tabbar-item>
			<u-tabbar-item :text="$t('menu_4')">
				<image class="u-page__item__slot-icon tabbar-icon" slot="inactive-icon"
					src="../../static/menu/4.png"></image>
				<image class="u-page__item__slot-icon tabbar-icon" slot="active-icon"
					src="../../static/menu/4_a.png"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: "ice-tabbar",
		props:{
			index:0,
		},
		created() {
			this.curTab = this.index;
		},
		data() {
			return {
				curTab:0,
				pages:[
					'/pages/index/index',
					'/pages/index/rank',
					'/pages/index/news',
					'/pages/user/my',
				]
			};
		},
		methods:{
			tabChange(e){
				/* console.log(e)
				this.curTab = e */
				uni.redirectTo({
					url:this.pages[e]
				})
			}
		}
	}
</script>

<style scoped>
	.tabbar-icon{
		width: 44rpx;
		height: 44rpx;
	}
</style>